Validační pipeline s React useFormState: Zvládnutí vícestupňové validace formulářů

Vytváření komplexních formulářů s robustní validací je běžnou výzvou v moderním webovém vývoji. React hook useFormState nabízí výkonný a flexibilní způsob správy stavu a validace formuláře, což umožňuje vytváření sofistikovaných vícestupňových validačních pipelines. Tento komplexní průvodce vás provede celým procesem, od pochopení základů až po implementaci pokročilých strategií asynchronní validace.

Proč vícestupňová validace formulářů?

Tradiční, jednostupňová validace formulářů se může stát těžkopádnou a neefektivní, zejména u formulářů s velkým počtem polí nebo složitými závislostmi. Vícestupňová validace vám umožňuje:

• Zlepšit uživatelský prožitek: Poskytujte okamžitou zpětnou vazbu na konkrétní části formuláře a efektivněji tak provázejte uživatele procesem vyplňování.
• Zvýšit výkon: Vyhněte se zbytečným kontrolám validace celého formuláře, čímž optimalizujete výkon, zejména u rozsáhlých formulářů.
• Zlepšit udržovatelnost kódu: Rozdělte logiku validace na menší, spravovatelné jednotky, díky čemuž bude kód srozumitelnější, testovatelnější a snadněji udržovatelný.

Pochopení useFormState

Hook useFormState (často dostupný v knihovnách jako react-use nebo ve vlastních implementacích) poskytuje způsob, jak spravovat stav formuláře, validační chyby a zpracování odeslání. Jeho základní funkčnost zahrnuje:

• Správa stavu: Ukládá aktuální hodnoty polí formuláře.
• Validace: Spouští validační pravidla proti hodnotám formuláře.
• Sledování chyb: Sleduje validační chyby spojené s každým polem.
• Zpracování odeslání: Poskytuje mechanismy pro odeslání formuláře a zpracování výsledku odeslání.

Vytvoření základní validační pipeline

Začněme jednoduchým příkladem dvoustupňového formuláře: osobní údaje (jméno, e-mail) a údaje o adrese (ulice, město, země).

Krok 1: Definujte stav formuláře

Nejprve definujeme počáteční stav našeho formuláře, který zahrnuje všechna pole:

const initialFormState = {
  firstName: '',
  lastName: '',
  email: '',
  street: '',
  city: '',
  country: '',
};

Krok 2: Vytvořte validační pravidla

Dále definujeme naše validační pravidla. Pro tento příklad budeme vyžadovat, aby všechna pole byla neprázdná, a zajistíme, že e-mail má platný formát.

const validateField = (fieldName, value) => {
  if (!value) {
    return 'Toto pole je povinné.';
  }

  if (fieldName === 'email' && !/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(value)) {
    return 'Neplatný formát e-mailu.';
  }

  return null; // Žádná chyba
};

Krok 3: Implementujte hook useFormState

Nyní integrujme validační pravidla do naší React komponenty pomocí (hypotetického) hooku useFormState:

import React, { useState } from 'react';

// Předpokládáme vlastní implementaci nebo knihovnu jako react-use
const useFormState = (initialState) => {
  const [values, setValues] = useState(initialState);
  const [errors, setErrors] = useState({});

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({ ...values, [name]: value });

    // Validace při změně pro lepší UX (volitelné)
    setErrors({ ...errors, [name]: validateField(name, value) });
  };

  const validateFormStage = (fields) => {
    const newErrors = {};
    let isValid = true;
    fields.forEach(field => {
      const error = validateField(field, values[field]);
      if (error) {
        newErrors[field] = error;
        isValid = false;
      }
    });
    setErrors({...errors, ...newErrors}); //Sloučení s existujícími chybami
    return isValid;
  };

  const clearErrors = (fields) => {
    const newErrors = {...errors};
    fields.forEach(field => delete newErrors[field]);
    setErrors(newErrors);
  };

  return {
    values,
    errors,
    handleChange,
    validateFormStage,
    clearErrors,
  };
};


const MyForm = () => {
  const { values, errors, handleChange, validateFormStage, clearErrors } = useFormState(initialFormState);
  const [currentStage, setCurrentStage] = useState(1);

  const handleNextStage = () => {
    let isValid;
    if (currentStage === 1) {
        isValid = validateFormStage(['firstName', 'lastName', 'email']);
    } else {
        isValid = validateFormStage(['street', 'city', 'country']);
    }

    if (isValid) {
      setCurrentStage(currentStage + 1);
    }
  };

  const handlePreviousStage = () => {
    if(currentStage > 1){
      if(currentStage === 2){
        clearErrors(['firstName', 'lastName', 'email']);
      } else {
        clearErrors(['street', 'city', 'country']);
      }
      setCurrentStage(currentStage - 1);
    }
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    const isValid = validateFormStage(['firstName', 'lastName', 'email', 'street', 'city', 'country']);
    if (isValid) {
      // Odeslání formuláře
      console.log('Formulář odeslán:', values);
      alert('Formulář odeslán!'); //Nahraďte skutečnou logikou odeslání
    } else {
      console.log('Formulář obsahuje chyby, prosím opravte je.');
    }
  };

  return (
    

      {currentStage === 1 && (
        

          
Osobní údaje
          
            Křestní jméno:
            
            {errors.firstName && {errors.firstName}}
          
          

          
            Příjmení:
            
            {errors.lastName && {errors.lastName}}
          
          

          
            E-mail:
            
            {errors.email && {errors.email}}
          
          

        
      )}

      {currentStage === 2 && (
        

          
Informace o adrese
          
            Ulice:
            
            {errors.street && {errors.street}}
          
          

          
            Město:
            
            {errors.city && {errors.city}}
          
          

          
            Země:
            
            {errors.country && {errors.country}}
          
          

        
      )}

      

        {currentStage > 1 && Předchozí}
        {currentStage < 2 && Další}
        {currentStage === 2 && Odeslat}
      
    
  );
};

export default MyForm;

Krok 4: Implementujte navigaci mezi fázemi

Použijte stavové proměnné ke správě aktuální fáze formuláře a vykreslete příslušnou sekci formuláře na základě aktuální fáze.

Pokročilé techniky validace

Asynchronní validace

Někdy validace vyžaduje interakci se serverem, například kontrolu, zda je uživatelské jméno dostupné. To vyžaduje asynchronní validaci. Zde je návod, jak ji integrovat:

const validateUsername = async (username) => {
  try {
    const response = await fetch(`/api/check-username?username=${username}`);
    const data = await response.json();
    if (data.available) {
      return null; // Uživatelské jméno je dostupné
    } else {
      return 'Uživatelské jméno je již obsazené.';
    }
  } catch (error) {
    console.error('Chyba při kontrole uživatelského jména:', error);
    return 'Chyba při kontrole uživatelského jména. Zkuste to prosím znovu.'; // Elegantní ošetření chyb sítě
  }
};

const useFormStateAsync = (initialState) => {
  const [values, setValues] = useState(initialState);
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({ ...values, [name]: value });
  };

  const validateFieldAsync = async (fieldName, value) => {
    if (fieldName === 'username') {
      return await validateUsername(value);
    }
    return validateField(fieldName, value);
  };


  const handleSubmit = async (event) => {
      event.preventDefault();
      setIsSubmitting(true);
      let newErrors = {};
      let isValid = true;

      for(const key in values){
        const error = await validateFieldAsync(key, values[key]);
        if(error){
          newErrors[key] = error;
          isValid = false;
        }
      }

      setErrors(newErrors);
      setIsSubmitting(false);

      if (isValid) {
        // Odeslání formuláře
        console.log('Formulář odeslán:', values);
        alert('Formulář odeslán!'); //Nahraďte skutečnou logikou odeslání
      } else {
        console.log('Formulář obsahuje chyby, prosím opravte je.');
      }
  };



  return {
    values,
    errors,
    handleChange,
    handleSubmit,
    isSubmitting //Volitelné: zobrazení zprávy o načítání během validace
  };
};

Tento příklad zahrnuje funkci validateUsername, která volá API pro kontrolu dostupnosti uživatelského jména. Ujistěte se, že ošetřujete potenciální chyby sítě a poskytujete uživateli odpovídající zpětnou vazbu.

Podmíněná validace

Některá pole mohou vyžadovat validaci pouze na základě hodnoty jiných polí. Například pole „Webové stránky společnosti“ může být povinné pouze v případě, že uživatel uvede, že je zaměstnán. Implementujte podmíněnou validaci ve svých validačních funkcích:

const validateFieldConditional = (fieldName, value, formValues) => {
  if (fieldName === 'companyWebsite' && formValues.employmentStatus === 'employed' && !value) {
    return 'Webové stránky společnosti jsou povinné, pokud jste zaměstnán.';
  }
  return validateField(fieldName, value); // Delegování na základní validaci
};

Dynamická validační pravidla

Někdy musí být samotná validační pravidla dynamická, založená na externích faktorech nebo datech. Toho můžete dosáhnout předáním dynamických validačních pravidel jako argumentů vašim validačním funkcím:

const validateFieldWithDynamicRules = (fieldName, value, rules) => {
  if (rules && rules[fieldName] && rules[fieldName].maxLength && value.length > rules[fieldName].maxLength) {
    return `Toto pole musí mít méně než ${rules[fieldName].maxLength} znaků.`;
  }
  return validateField(fieldName, value); // Delegování na základní validaci
};

Zpracování chyb a uživatelský prožitek

Efektivní zpracování chyb je klíčové pro pozitivní uživatelský prožitek. Zvažte následující:

• Zobrazujte chyby jasně: Umístěte chybové zprávy poblíž příslušných vstupních polí. Používejte jasný a stručný jazyk.
• Validace v reálném čase: Validujte pole, jak uživatel píše, a poskytujte okamžitou zpětnou vazbu. Dbejte na dopady na výkon; v případě potřeby použijte debounce nebo throttle pro volání validace.
• Zaměření na chyby: Po odeslání zaměřte pozornost uživatele na první pole s chybou.
• Přístupnost: Zajistěte, aby chybové zprávy byly přístupné uživatelům se zdravotním postižením, pomocí atributů ARIA a sémantického HTML.
• Internacionalizace (i18n): Implementujte správnou internacionalizaci pro zobrazení chybových zpráv v preferovaném jazyce uživatele. Pomoci mohou služby jako i18next nebo nativní JavaScript Intl API.

Osvědčené postupy pro vícestupňovou validaci formulářů

• Udržujte validační pravidla stručná: Rozdělte složitou validační logiku na menší, znovupoužitelné funkce.
• Důkladně testujte: Pište unit testy, abyste zajistili přesnost a spolehlivost vašich validačních pravidel.
• Použijte validační knihovnu: Zvažte použití specializované validační knihovny (např. Yup, Zod) pro zjednodušení procesu a zlepšení kvality kódu. Tyto knihovny často poskytují validaci založenou na schématech, což usnadňuje definici a správu složitých validačních pravidel.
• Optimalizujte výkon: Vyhněte se zbytečným kontrolám validace, zejména během validace v reálném čase. Použijte techniky memoizace k ukládání výsledků validace do mezipaměti.
• Poskytujte jasné pokyny: Provázejte uživatele procesem vyplňování formuláře s jasnými pokyny a užitečnými nápovědami.
• Zvažte postupné odhalování: Zobrazujte pouze relevantní pole pro každou fázi, čímž zjednodušíte formulář a snížíte kognitivní zátěž.

Alternativní knihovny a přístupy

Ačkoliv se tento průvodce zaměřuje na vlastní hook useFormState, existuje několik vynikajících knihoven pro formuláře, které poskytují podobnou funkcionalitu, často s dalšími funkcemi a optimalizacemi výkonu. Mezi oblíbené alternativy patří:

• Formik: Široce používaná knihovna pro správu stavu formulářů a validaci v Reactu. Nabízí deklarativní přístup k manipulaci s formuláři a podporuje různé validační strategie.
• React Hook Form: Knihovna zaměřená na výkon, která využívá nekontrolované komponenty a React ref API k minimalizaci překreslování. Poskytuje vynikající výkon pro velké a komplexní formuláře.
• Final Form: Všestranná knihovna, která podporuje různé UI frameworky a validační knihovny. Nabízí flexibilní a rozšiřitelné API pro přizpůsobení chování formuláře.

Výběr správné knihovny závisí na vašich konkrétních požadavcích a preferencích. Při rozhodování zvažte faktory jako výkon, snadnost použití a sadu funkcí.

Mezinárodní aspekty

Při tvorbě formulářů pro globální publikum je nezbytné zvážit internacionalizaci a lokalizaci. Zde jsou některé klíčové aspekty:

• Formáty data a času: Používejte formáty data a času specifické pro danou lokalitu, abyste zajistili konzistenci a předešli nejasnostem.
• Formáty čísel: Používejte formáty čísel specifické pro danou lokalitu, včetně symbolů měn a desetinných oddělovačů.
• Formáty adres: Přizpůsobte pole pro adresu formátům různých zemí. Některé země mohou vyžadovat poštovní směrovací čísla před městy, zatímco jiné je nemusí mít vůbec.
• Validace telefonních čísel: Použijte knihovnu pro validaci telefonních čísel, která podporuje mezinárodní formáty telefonních čísel.
• Kódování znaků: Zajistěte, aby váš formulář správně zpracovával různé znakové sady, včetně Unicode a dalších nelatinských znaků.
• Rozložení zprava doleva (RTL): Podporujte jazyky psané zprava doleva, jako je arabština a hebrejština, přizpůsobením rozložení formuláře.

Zvážením těchto mezinárodních aspektů můžete vytvářet formuláře, které jsou přístupné a uživatelsky přívětivé pro globální publikum.

Závěr

Implementace vícestupňové validační pipeline s React hookem useFormState (nebo alternativními knihovnami) může výrazně zlepšit uživatelský prožitek, zvýšit výkon a zlepšit udržovatelnost kódu. Pochopením základních konceptů a uplatněním osvědčených postupů uvedených v tomto průvodci můžete vytvářet robustní a škálovatelné formuláře, které splňují požadavky moderních webových aplikací.

Nezapomeňte upřednostňovat uživatelský prožitek, důkladně testovat a přizpůsobovat své validační strategie specifickým požadavkům vašeho projektu. S pečlivým plánováním a realizací můžete vytvářet formuláře, které jsou funkční a zároveň se příjemně používají.

Další zdroje

• Oficiální dokumentace Reactu
• Dokumentace Formik
• Dokumentace React Hook Form